<template>
  <div class="Navbar">
    <Navbar/>
  </div>
  <div class="search-results">
    <el-row :gutter="6" type="flex" class="search-results-container" >
      <el-col :span="columns" v-for="post in results" :key="post.id" > <!-- 这里的span设置为8表示 3列布局 -->
        <el-card class="post-card" shadow="hover">
          <a :href="post.link" target="_blank">
            <div class="post-module-thumb">
              <el-image :src="post.imageSrc" class="post-thumb" fit="cover"/>
              <div class="post-pay-type">
                <span>{{ post.level }}</span>
              </div>
            </div>
            <div class="post-info">
              <h3><a :href="post.link">{{ post.title }}</a></h3>
            </div>
          </a>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import api from "@/api/api.js";

export default {
  data() {
    return {
      query: this.$route.query.title, // 从路由查询参数获取
      results: [], // 用于存储搜索结果
      columns: 8,
    };
  },
  mounted() {
    this.handleResize(); // 监听屏幕大小变化
    this.fetchSearchResults(); // 组件挂载后调用获取搜索结果
  },
  methods: {
    async fetchSearchResults() {

      const res = await api.get('/search', {params: this.$route.query});
      if (res && res.data.code === 0) {
        for (let i = 0; i < res.data.data.length; i++)
          {
            res.data.data[i].link = "/detail/" +  res.data.data[i].id;
          }
        this.results = res.data.data; // 更新结果
      }


    },
    handleResize() {
      const screenWidth = window.innerWidth;
      if (screenWidth <= 768) {
        this.columns = 10;
      } else {
        this.columns = 8;
      }
    },
  }
};
</script>
<style scoped>
h3 { white-space: nowrap; /* 不允许换行 */
  overflow: hidden; /* 隐藏溢出 */
  text-overflow: ellipsis; /* 使用省略号 */

}
@media (min-width: 1250px) {

  .Navbar {
    width: 100%;
  }

  .post-card {
    margin-bottom: 20px;
    width: 100%; /* 设置为100%以确保适应列的宽度 */
  }

  .post-thumb {
    width: 100%;
    height: 520px; /* 根据需要调整高度 */
    border-radius: 4px;
  }

  .search-results {
    margin-top: 100px; /* 调整顶部间距 */
    padding: 0 20px;
  }
}

@media (min-width: 524px) and (max-width: 700px) {
  .post-thumb {
        max-width: 224px;
        height: 276px;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;

  }

  .search-results {
    margin-top: 100px; /* 调整顶部间距 */
  }

  .search-results-container {
    display: flex;
    /* flex-wrap: wrap; */
    justify-content: space-evenly;
    align-items: center;
    align-content: center;
    flex-direction: row;

     white-space: nowrap; /* 不允许换行 */
  overflow: hidden; /* 隐藏溢出 */
  text-overflow: ellipsis; /* 使用省略号 */
  }

  :deep(.el-col-10) {
    width: 100%; /* 先禁用 scoped 测试此样式 */
    margin-bottom: 20px;
  }
}
@media (min-width: 10px) and (max-width: 523px) {
    .post-thumb {

  }

  .search-results {
    margin-top: 100px; /* 调整顶部间距 */
    padding: 0 20px;
  }

  .search-results-container {
    box-sizing: border-box;
    display: flex;
    flex-wrap: nowrap;
    position: relative;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;


  }

  :deep(.el-col-10) {
    width: 100%; /* 先禁用 scoped 测试此样式 */
    margin-bottom: 20px;
  max-width: 100%;
  }
}
</style>